<template>
  <div class="cateLists">
    <!-- 顶部搜索框 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchParams" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="searchParams.keyWords" placeholder="关键子"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchParams.range"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- / 顶部搜索框-->
    <div style="margin-bottom: 20px;display:flex;">
      <el-button type="primary" @click="$router.push('/itemAdd')" style="margin-right: 10px" size="mini">新增商品</el-button>
      <download-excel
        class="btn btn-default"
        :data="items"
        :fields="itemFileds"
        worksheet="My Worksheet"
        name="商品列表.xls"
      >
        <el-button type="primary" size="mini">导出</el-button>
      </download-excel>
    </div>
    <!-- 商品分类列表 -->
    <el-table
      :data="items"
      :height="400"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="商品名">
      </el-table-column>
      <el-table-column
        prop="price"
        label="商品价格"
       >
      </el-table-column>
      <el-table-column
        prop="desc"
        label="商品描述">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="bottom-start">
            <div slot="content" style="width: 500px">
              {{ scope.row.desc }}
            </div>
            <span>
              {{ scope.row.desc ?
              (scope.row.desc.length > 15? scope.row.desc.substr(0, 15) + '...' : scope.row.desc)
              :
              '暂无描述' }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="sale"
        label="销量">
        <template slot-scope="scope">
          <el-tag :color="scope.row.sale> 500? 'red': 'green'">
            {{ scope.row.sale }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="thumb"
        label="商品图片">
        <template slot-scope="scope">
          <img :src="scope.row.thumb" width="100"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="onsale"
        label="上下架">
        <template slot-scope="scope">
          <el-switch :value="scope.row.onsale" :active-value="1" :inactive-value="0"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="createAt"
        label="上架时间">
        <template slot-scope="scope">
          {{ dayjs(scope.row.createAt).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="enterItemUpdate(scope.row.id)">编辑</el-button>
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- /商品分类列表 -->
    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next, jumper, sizes, total, ->"
      :page-size="pageSize"
      :current-page="page"
      @size-change="pageSizeChange"
      @current-change="currentChange"
      :total="total">
    </el-pagination>
    <!-- /分页组件 -->
  </div>
</template>

<script>
import { getItemLists } from '_api'
import dayjs from 'dayjs'
export default {
  name: 'itemLists',
  data () {
    return {
      searchParams: {
        keyWords: '',
        range: []
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      total: 0,
      page: 1,
      pageSize: 10,
      items: [],
      itemFileds: {
        商品名: 'name',
        价格: 'price',
        描述: 'desc',
        销量: 'sale'
      }
    }
  },
  methods: {
    enterItemUpdate (id) {
      // 跳转到更新商品
      this.$router.push({
        path: '/itemUpdate',
        query: {
          id
        }
      })
    },
    dayjs,
    currentChange (page) {
      // 分页切换 页码
      this.page = page
      this.fetchItems()
    },
    pageSizeChange (pageSize) {
      // 改变分页一页显示多少条
      this.pageSize = pageSize
      this.fetchItems()
    },
    fetchItems () {
      // 获取商品列表
      getItemLists({
        page: this.page,
        pageSize: this.pageSize,
        keyWords: this.searchParams.keyWords,
        start: this.searchParams.range[0],
        end: this.searchParams.range[1]
      }).then(res => {
        if (res.data.code === 200) {
          this.items = res.data.data.lists
          this.total = res.data.data.total
        }
      })
    },
    // 获取所有分类 传递新增和修改分类 作为他们父级分类下拉选项
    doSearch () {
      this.fetchItems()
      this.searchParams = {
        keyWords: '',
        range: []
      }
    }
  },
  created () {
    this.fetchItems()
  }
}
</script>

<style lang="scss" scoped>
</style>
